<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>开始节点属性</span>
    </div>
    <el-form-item label="编号">
      <el-input v-model="id" />
    </el-form-item>
    <el-form-item label="名称">
      <el-input v-model="name" />
    </el-form-item>
    <!-- <el-form-item label="表单标识">
      <el-input v-model="formKey" />
    </el-form-item> -->
    <WorkflowFormCom :init-workflow-form="formKey" @selectForm="selectForm" />
    <!-- <el-form-item label="启动流程的人">
      <el-input v-model="initiator" />
    </el-form-item> -->
  </el-card>
</template>
<script>
import WorkflowFormCom from './selectForm.vue'
export default {
  name: 'StartEventProps',
  components: {
    WorkflowFormCom
  },
  props: {
    element: {
      required: false,
      type: Object,
      default: null
    }
  },
  inject: ['bpmnModeler'],
  data() {
    return {
      id: this.element.id || '',
      name: '',
      formKey: '',
      initiator: ''
    }
  },

  watch: {
    id(newVal, oldVal) {
      const bpmnModeler = this.bpmnModeler()
      const modeling = bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, { id: newVal })
    },
    name(newVal, oldVal) {
      const bpmnModeler = this.bpmnModeler()
      const modeling = bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, { name: newVal })
    },
    formKey(newVal, oldVal) {
      const bpmnModeler = this.bpmnModeler()
      const modeling = bpmnModeler.get('modeling')
      modeling.updateProperties(this.element, { formKey: newVal })
    },
    // initiator(newVal, oldVal) {
    //   const bpmnModeler = this.bpmnModeler()
    //   const modeling = bpmnModeler.get('modeling')
    //   modeling.updateProperties(this.element, { initiator: newVal })
    // },

    element: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          if (newVal.type === 'bpmn:StartEvent') { // 防止修改其他子组件的属性
            const businessObject = newVal.businessObject
            this.formKey = businessObject.get('formKey')
            this.initiator = businessObject.get('initiator')
            this.name = businessObject.name
          }
        }
      }

    }
  },
  methods: {
    selectForm(data) {
      this.formKey = data
    }
  }
}
</script>
<style>

</style>
